【山崎研Tips】TouchDesigner + Arduino によるモノのオーディオリアクティブ入門
https://scrapbox.io/files/60ade517ee56140023c8f810.mp4
1. はじめに
音楽に反応するメディアアート，オーディオリアクティブを実現するには TouchDesigner を使うのが最も近道です。音楽と連動するCGはTouchDesignerのみでつくることができます（TDSW YouTube Academy の#00，#04，#05 をやれば1時間くらいで入門編がクリアできます）。このページは，オーディオリアクティブをCGのみならずモノにまで広げたい方に向けた，モノのオーディオリアクティブ入門編です。モノのオーディオリアクティブの最もカンタンなやり方として，Firmataという通信プロトコルを使用してTouchDesignerとArduinoを連携させる方法を紹介します。 今後，デジタル世界と物理的な世界を結びつける技術がますます必要になってきます。メディアアート，バーチャルリアリティ，ロボット，IoT，フィジカルコンピューティング，筋トレ，関節技など，名前は違いますが，「サイバー世界と物理世界をつなぐ表現技術」が今後キーテクノロジーになることはたしかです。その一環として，音情報の可視化デジタルツインに着目し，その実現の第一歩となるようにこのチュートリアルを用意しました（2021年度の卒研生用）。
Keyword: オーディオリアクティブ，IoT，マイコン，TouchDesigner
TouchDesignerとはリアルタイムにインタラクティブなマルチメディアコンテンツをつくることができるノードベースのビジュアルプログラミング言語です。プロジェクションマッピングをはじめ，様々なメディアコンテンツをつくることができます。はじめての方は下記を参考にしてインストールを済ませてください。チュートリアルはTDSW YouTube Academyがおすすめです。先述のとおり，はじめての方でも#00，#04，#05 （あわせて１時間くらい）をやれば ，オーディオリアクティブの入門編がクリアできます。 インストール方法
おすすめのチュートリアル
はじめての方でも#00，#04，#05 をやれば ，，オーディオリアクティブの入門編がクリアできる。
３. Firmataを用いたFirmataを使うと良いとArduinoの連携方法 TouchDesignerをリアルタイムにマイコンと連携させるにはFirmataを使うのが一番カンタンです。Firmataはコンピュータ上のソフトウェアからシリアル通信でマイコンと通信するプロトコルです。マイコン上にファームウェアを書き込むと，（RasPiのGPIOのように）PCからシリアル通信経由でリアルタイムにマイコンのポートを制御できるようになります。Arduino IDEにもTouchDesignerにもFirmataのサンプル，機能が標準で用意されているのでとても便利です。（が，日本語のチュートリアルがあまりなさそうなのでこのページを用意しました。） ３. Firmataを用いたTouchDesignerとArduinoの連携方法（まとめ）
・TouchDesigner→Arduinoのやり方
Firmataとは：
コンピュータ上のソフトウェアからシリアル通信でマイコンと通信するプロトコル
マイコン上にファームウェアを書き込むことによりシリアル通信でマイコンが制御できる
3.1 Firmataを用いたTouchDesignerとArduinoの連携方法接続方法
Arduino側はFirmata用のファームウェアとなるスケッチを書き込みます。TouchDesigner側はPalleteからFirmataを呼び出します。今回は確認のためにArduinoのピン６にLEDを接続し，TouchDesignerからPWMで明るさを変えてみましょう。
3.1 Firmataを用いたTouchDesignerとArduinoの連携方法接続方法（まとめ）
・Arduino側： Firmata用のファームウェアとなるスケッチを書き込む。
・TouchDesigner側： PalleteからFirmataを呼び出す。
・使用環境：Arduino Uno
・確認方法：LED（ピン6に接続）のPWM調光
3.1.1 Arduinoの設定：Firmataを書き込む
FirmataはデフォルトでArduinoのサンプルスケッチの中に用意されてます。下記の手順でサンプルスケッチを開き，Arduinoに書き込んでください。
「ファイル -> スケッチの例 -> Firmata -> Standard Firmata」でサンプルスケッチを開き，Arduinoに書き込む
https://gyazo.com/38ac70a537481c05439e8d36e7d2f843
3.1.1 Arduinoの設定：Firmataの書き込み（まとめ）
「ファイル -> スケッチの例 -> Firmata -> Standard Firmata」を開きArduinoの書き込む
3.1.2 TouchDesigner側の設定：Firmataを呼び出す
TouchDesignerでもデフォルトでFirmataが用意されています。下記の手順でFirmataを呼び出してCOMポートの接続情報を設定してください。
「Pallet -> Tools -> firmata 」をNetworkEditor（作業ウィンドウ）にドラッグ＆ドロップ
パラメタ設定("p"キーを押して表示)で「Firmata -> Port」でArduinoが接続されているポートを設定
※ポート番号がわからない場合はデバイスマネージャで確認
設定後，「Active 」をOnにすると接続される（接続した瞬間にArduino上の「Rx」LEDが点滅します）
https://gyazo.com/8e2d1633aa88f1b895ea1112f5f18181
次に，ピン６をPWMモードに設定します。
「Pin modes」タブから出力ピンのモードを設定する
このチュートリアルでは６番ピンをLEDをPWM駆動（調光）するので 「Pin 6」を「PWM (8 bit)」に設定
https://gyazo.com/13b29e5b229a77e6b83c5fb2f42e4039
以上で設定完了です。TouchDesinerからArduino ピン６のPWM値を制御できるようになりました。では実際に，TouchDesigner上からLEDの明るさを変えてみましょう。
「Pin Values」タブの 「Pin 6」のシークバーを動かしPWM値を変える
https://gyazo.com/1b7a6ada6f4c93edd1d36ced9f4e81f0
https://scrapbox.io/files/60ae6777448c04001e325b29.mp4
3.1.2 TouchDesigner側の設定：Firmataを呼び出し（まとめ）
・「Pallet -> Tools -> firmata 」をNetworkEditor（作業ウィンドウ）にドラッグ＆ドロップ
・パラメタ設定("p"キーを押して表示)で「Firmata -> Port」でArduinoが接続されているポートを設定
・設定後，「Active 」をOn
・「Pin modes」タブから 「Pin 6」を「PWM (8 bit)」に設定
・「Pin Values」タブの 「Pin 6」のシークバーを動かしPWM調光
4. オーディオリアクティブによるLチカ
本章ではモノのオーディオリアクティブの入門編として，オーディオリアクティブによるLチカ（「LEDをチカチカ点灯させる」の略称）を紹介します。これができれば，
STEP１：ランプ関数を利用して立方体（BOX）を回転させる
STEP２：オーディオリアクティブ（CG編）音楽の信号波形を利用して立方体（BOX）の大きさを変える
STEP３：オーディオリアクティブ（モノ編）音楽の信号波形を利用してLEDを調光する
ゼミでは，STEP１までを作成したファイルを使ってSTEP２から説明していきます。
STEP１までを作成した下記のファイルを使ってオーディオリアクティブにCGを動かします。
https://gyazo.com/6e99bb7233bf10196b3fd77a9b05ef2f
このファイルではランプ関数を利用して立方体（BOX）を回転させ（Transform①）背景と重ねて表示しています。これに，音と連携して立方体の大きさを変える機能（Transform②）を追加します。大まかな手順は下記のとおりです。（ゼミ中に手順を説明しますが，復習のときは詳細はTDSW YouTube Academyの#05を参照してください。） 4.1 オーディオリアクティブ（CG編）（まとめ）
STEP １ : オーディオリアクティブの設定
①「CHOP」→「Audio File In」の追加
「FIle」 → 音楽ファイルを選択
「Mono」→ 1chに
②「CHOP」→「Analyze」の追加
「Analyze」→「Function」→「Maximun」に設定
③「CHOP」→「Null」を「Analyze」の後に置く
④「Tranceform」SOPの後ろに「Tranceform」SOPを挿入
「Tranceform」→「Uniform Scale」に「Analyze」の値を挿入
STEP ２ : オーディオリアクティブの調整
⑤「CHOP」→「Triger」を「Analyze」の後に挿入→ 0.5ぐらいに設定（音楽にあわせて調整する）
4.2 オーディオリアクティブ（モノ編）
4.1（STEP２：オーディオリアクティブ（CG編））までで作成したものに，Firmataを加えてLEDの調光をします。
https://gyazo.com/8488810ea4c6b740bce2e1374933a4e3
手順は下記のとおりです。
4.2 オーディオリアクティブ（モノ編）の手順
STEP １ : Firmataの追加
3.1.2の手順でFirmataを追加しPin 6をPWMに設定する
STEP２ : 音声からの値（null）をドラッグ＆ドロップして「Pin 6」のPWM値に設定
Firmataのパラメタ設定("p"キーを押して表示)で
「Pin Values」タブの 「Pin 6 (PWM)」へ「null」（Transform2への入力と同じもの）をドラッグ＆ドロップ
→ 「Export CHOP」
https://gyazo.com/32ecfabfa2c259e716f46258480d4b70
以上で設定完了です。LEDの明るさを確認してください。Triggerで設定したしきい値を変更すると，光り方が変わります。
4.3 調光の調整
入力に用いる音楽によっては，4.2までの内容ではLEDの変化が小さいかもしれません。Triggerのしきい値の値を設定すれば多少の調整はできますが，それでは不十分なこともあります。本節では，そんなときのための調整方法のカンタンな一例を示します。具体的にはMath CHOPで値のレンジを変更（拡大）します。
4.2 調光の調整の手順
STEP １ : Math CHOPの追加
「Trigger」と「Null」の間の接続線上で右クリック→「Insert Operator」から「Math」 CHOPを追加
パラメタ設定("p"キーを押して表示)で 「Range」タブから入力値を変更します。
下図の例ではしきい値(0.5)に合わせて，入力レンジを0.5 - 1に，出力レンジを0 - 1に変更しています。
https://gyazo.com/f84992f9b6a5591acb1ba9fc10d84e82
以上で設定完了です。LEDの光り方を確認してみてください。本ページトップの動画のように，音楽あわせてLEDの光り方が変わるようになっているはずです。
５. おわりに
本チュートリアルでは，モノのオーディオリアクティブの最もカンタンなやり方として，Firmata を用いてTouchDesignerとArduinoを連携させる方法を紹介し，実例としてオーディオリアクティブなLED調光の事例を示しました。同様にして，様々なモノのオーディオリアクティブが実現できます。フルカラーLEDを使ってもいいですし，サーボモータやロボットの制御もできます。是非，皆さんのアイデアを形にしてください。
その他の参考：
https://gyazo.com/71c7de59f100448c29cdb7f29fbd171b